/**
 * TextArea组件 配合form组件使用
 * @Author: linzy
 * @Date: 2022-08-29
 * @function TextArea
 * @param {array} showCount=true - 是否显示限制字数
 * @param {array} mode=default - 控制组件数组
 * @param {array} headCount=12 - 头部字数
 * @example
 *  <TextArea />
 */
import React, { useMemo } from "react";
import { Input } from "antd";
import { getShortMessageCount } from "@/hooks/tools";
import { setDefaultAttrs } from "@/hooks/tools";
import "./index.css";
const { TextArea } = Input;

export default (props = {}) => {
  setDefaultAttrs(props, {
    showCount: true,
    mode: "default",
    headCount: 12,
  });
  const { showCount, mode, headCount, ...resetProps } = props;
  const { value } = resetProps;
  const msgCount = getShortMessageCount(value, headCount);
  // 短信剩余字数
  const shortMsgRemainCount = useMemo(() => {
    if (!value) return 70 - headCount;
    if (value.length <= 70 - headCount) {
      return 70 - headCount - value.length;
    } else {
      return 67 - ((value.length + headCount) % 67 || 67);
    }
  }, [value, headCount]);
  return (
    <div className="textarea_com_box">
      <TextArea {...resetProps} />
      <div className="textarea_com_count">
        {mode === "shortMessage" && (
          <>
            {msgCount > 0 && (
              <span style={{ color: msgCount > 1 ? "#f00" : "inherit" }}>
                （{msgCount}条短信计费）
              </span>
            )}
            {/* {shortMsgRemainCount} / {msgCount} */}
          </>
        )}
        {showCount && (
          <span>
            {value?.length || 0} / {resetProps.maxLength}
          </span>
        )}
      </div>
    </div>
  );
};
